<template>
  <!-- 需求管理 -->
  <div class="personnel-container-padding">
    <div class="form">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="博士后工作状态：" style="padding: 0">
          <el-select
            v-model="formInline.workStatus"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in workStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作单位：">
          <el-select
            v-model="formInline.workUnitId"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in dptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="进站时间：">
          <el-date-picker
            v-model="formInline.entryTime"
            style="width: 240px"
            type="daterange"
            range-separator="→"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item label="关键字：">
          <el-select
            v-model="formInline.check"
            placeholder="请选择"
            clearable
            style="width: 100px; margin-right: 10px"
          >
            <el-option label="项目名称" value="projectName" />
            <el-option label="人员姓名" value="name" />
            <el-option label="员工编号" value="employeeNumber" />
          </el-select>
          <el-input v-model="formInline.inputValue" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="专家等级：" style="padding: 0">
          <el-select
            v-model="formInline.expertLevel"
            placeholder="Activity zone"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="margin-right: 10px"
            @click="handSearch"
          >
            搜索
          </el-button>
          <el-button @click="handReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="buttonList">
      <el-button type="primary" @click="handAddPersonnel">新增博士后</el-button>
      <el-button @click="exportPersonnel">导出搜索结果</el-button>
    </div>

    <vxe-grid v-bind="perGridOptions" :height="height">
      <template #operate="{ row }">
        <div class="operatecss">
          <el-button type="primary" link @click="viewEvent(row, 1)">
            详情
          </el-button>
          <el-button type="primary" link @click="editStatus(row)">
            修改状态
          </el-button>
          <el-button type="primary" link @click="viewEvent(row, 2)">
            季报填写
          </el-button>
          <el-button type="primary" link @click="handEdit(row)">修改</el-button>
          <el-button type="primary" link @click="delEvent(row)">删除</el-button>
        </div>
      </template>
      <template #pager>
        <vxe-pager
          v-model:current-page="pageVO.currentPage"
          v-model:page-size="pageVO.pageSize"
          :total="pageVO.total"
          :layouts="[
            'Total',
            'Sizes',
            'Home',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'End',
            'FullJump',
          ]"
          @page-change="pageChange"
        />
      </template>
    </vxe-grid>

    <!-- dialog -->
    <el-dialog
      v-model="workingDialog"
      title="修改博士后状态"
      width="500"
      align-center
    >
      <div class="dialogcontent">
        <div class="top">
          {{ workingDetails.name }}（编号：{{ workingDetails.employeeNumber }}）
        </div>
        <div class="middle">
          <span>工作状态：</span>
          <el-radio-group v-model="workingDetails.workStatus">
            <el-radio-button
              v-for="item in workStatusList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="margin-right: 10px" @click="workingDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="handEditWork">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import {
    ref,
    inject,
    onBeforeMount,
    onBeforeUnmount,
    onMounted,
    computed,
  } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { perGridOptions } from './table/column'
  import { useRouter } from 'vue-router'
  import { useUserStore } from './pinia/pinia'
  import {
    getPersonnelList,
    getPersonnelInfo,
    updatePersonnelWork,
    deletePersonnel,
  } from '@/api/postdoctor'
  import { useDictStore } from '@/store/modules/dict'
  import { getSimpleDeptList } from '@/api/system/dept'

  const dictStore = useDictStore()
  const workStatusList = computed(() =>
    dictStore.getDictType('postdoc_work_status')
  )

  const store = useUserStore()
  const router = useRouter()
  // 搜索表单
  const formInline = ref({
    check: '',
    inputValue: '',
    workStatus: '',
    workUnitId: '',
    entryTime: '',
    expertLevel: '',
  })

  const handCheckChange = (value) => {
    formInline.value[value] = formInline.value.inputValue
  }

  onMounted(() => {
    getList()
    getDptList()
  })

  const getList = () => {
    const obj = Object.assign({}, formInline.value)
    delete obj.check
    delete obj.inputValue
    const params = {
      pageNo: pageVO.currentPage,
      pageSize: pageVO.pageSize,
      ...obj,
    }

    getPersonnelList(params).then((res) => {
      perGridOptions.data = res.data.list
      console.log(perGridOptions)
    })
  }
  // 搜索
  const handSearch = () => {
    if (formInline.value.inputValue != '' && formInline.value.check == '') {
      ElMessage.warning('请选择搜索类型')
      return
    }
    formInline.value[formInline.value.check] = formInline.value.inputValue
    // delete formInline.value.check
    // delete formInline.value.inputValue
    // console.log(formInline.value)
    getList()
  }
  // 重置搜索
  const handReset = () => {
    formInline.value = {
      check: '',
      inputValue: '',
      workStatus: '',
      workUnitId: '',
      entryTime: '',
      expertLevel: '',
    }
  }
  // const loading = ref(false)

  const viewEvent = (item, type) => {
    store.setBaseUserInfo(item)
    if (type == 1) {
      router.push({
        path: '/postdoctor/personnel/details',
        query: { id: item.id },
      })
    }
    if (type == 2) {
      router.push({
        path: '/postdoctor/personnel/details',
        query: { id: item.id, addReport: 1 },
      })
    }
  }

  const delEvent = (item) => {
    ElMessageBox.confirm('确定删除该条博士后?', '删除博士后', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deletePersonnel(item.id).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
    })
  }

  const handEdit = (item) => {
    router.push({
      path: '/postdoctor/personnel/add',
      query: { id: item.id },
    })
  }

  const handEditWork = () => {
    const params = {
      id: workingDetails.value.id,
      workStatus: workingDetails.value.workStatus,
    }
    updatePersonnelWork(params).then((res) => {
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
      getList()
      workingDialog.value = false
    })
  }

  const dptList = ref([])
  const getDptList = () => {
    getSimpleDeptList().then((res: any) => {
      dptList.value = res.data
    })
  }

  const pageVO = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const pageChange = ({ pageSize, currentPage }) => {
    pageVO.currentPage = currentPage
    pageVO.pageSize = pageSize
  }

  const exportPersonnel = () => {
    console.log('导出')
  }

  const handAddPersonnel = () => {
    router.push({ path: '/postdoctor/personnel/add' })
  }

  const workingDialog = ref(false)
  const workingDetails = ref({}) as any
  const editStatus = (row) => {
    const params = {
      id: row.id,
      getType: 2,
    }
    getPersonnelInfo(params).then((res) => {
      workingDetails.value = res.data
      workingDialog.value = true
    })
  }

  const height = ref(0)
  interface BaseTableHeight {
    (padding: number): number
  }
  const $baseTableHeight = inject<BaseTableHeight>('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style lang="scss" scoped>
  // .personnel-container-padding {
  //   padding: 12px 21px;
  //   width: 100%;
  //   height: 82vh;
  // }
  .buttonList {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .form-inline {
    .el-select {
      --el-select-width: 240px;
    }

    .el-input {
      --el-input-width: 240px;
    }

    :deep(.el-form-item__label) {
      padding: 0 8px 0 0;
    }

    :deep(.el-form-item) {
      margin-right: 24px;
    }
  }

  .dialogcontent {
    padding: 20px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    font-weight: bold;

    .top {
      margin-bottom: 20px;
    }

    .middle {
      display: flex;
      align-items: center;
    }
  }

  :deep(.el-button + .el-button) {
    margin-left: 0px;
  }

  :deep(.operatecss) {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
</style>
